/**
 * 人气推荐
 * **/
import './index.scss'
import { getHot } from '../../api/home'
import { useEffect, useState } from 'react'
import LazyLoad from '../LazyLoad/index'
import { RightOutlined } from '@ant-design/icons'
import Skeleton from '../Skeleton/index'
export default () => {
    /**
     * 默认列表
     * **/
    const defaultList = (
        <>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
            <li>
                <Skeleton type={2}></Skeleton>
            </li>
        </>
    )
    /**
     * 人气推荐列表
     * **/
    const [hotList, setHotList] = useState([])
    /**
     * 获取人气推荐数据
     * **/
    const getHotList = async () => {
        try {
            const data = await getHot()
            setHotList(data)
        } catch (error) { }
    }
    useEffect(() => {
        getHotList()
    }, [])
    return (
        <div className='HotList'>
            <div className="top">
                <div className="left">
                    <h1>人气推荐</h1>
                    <p><span>人气爆款</span>&emsp;<span>不容错过</span></p>
                </div>
                <span>查看全部&emsp;<RightOutlined /></span>
            </div>
            <LazyLoad load={getHotList}>
                <ul>
                {hotList.length?hotList.map(item=>(
                    <li>
                        <img src={item.picture} alt="" />
                        <h2>{item.title}</h2>
                         <h4>{item.alt}</h4>
                    </li>
                )):defaultList}
                </ul>
            </LazyLoad>
        </div>
    )
}